<template>
	<view class="content">
		<view class="placeBox">
			<view class="placeInfo">
				<text class="placeName ellipsis">{{info.info.data.name}}</text>
				<text class="placeCapacity">容纳人数 ：{{info.info.data.num}}人</text>
				<text class="placeAddress ellipsis">地 址 ：{{info.info.data.address}}</text>
				<text class="placePrice">￥{{info.info.data.price}}</text>
				<image :src="info.info.data.cover" class="placePoster"></image>
			</view>
			<view class="timeBox">
				<view class="timeItem">
					<text class="timeLabel">预定日期</text>
					<text class="time">{{info.service_data}}</text>
				</view>
				<view class="timeItem">
					<text class="timeLabel">开始时间</text>
					<text class="time">{{info.startTimeValue}}</text>
				</view>
				<view class="timeItem">
					<text class="timeLabel">结束时间</text>
					<text class="time">{{info.endTimeValue}}</text>
				</view>
			</view>
			<view class="item">
				<text>人  数 ：</text>
				<text>{{info.num}}人</text>
			</view>
			<view class="item">
				<text>特殊需求 ：</text>
				<text>{{info.demand}}</text>
			</view>
			<view class="item">
				<text>使用目的 ：</text>
				<text>{{info.purpose}}</text>
			</view>
			<view class="noteBox">
				<text>备注 ：</text>
				<text class="notes">{{info.notes}}</text>
			</view>
			</view>
			<view class="userBox">
				<view class="userItem">
					<text class="userLabel">个人信息</text>
				</view>
				<view class="userItem">
					<text>姓  名 ：</text>
					<text>{{info.name}}</text>
				</view>
				<view class="userItem">
					<text>房间号 ：</text>
					<text>{{info.fanghao}}</text>
				</view>
				<view class="userItem">
					<text>联系方式 ：</text>
					<text>{{info.tel}}</text>
				</view>
			</view>
			<view class="userBox">
				<view class="userItem">
					<text class="userLabel">费用明细</text>
				</view>
				<view class="userItem">
					<text>合计 ：</text>
					<text>￥{{info.info.data.price}}</text>
				</view>
			</view>
		<view class="cartBox">
			<text class="totalLabel">合计：</text>
			<text class="totalPrice">￥{{info.info.data.price}}</text>
			<view class="submit" @click="submit">
				提交预约
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				info:''
			}
		},
		onLoad() {
			this.info = this.$store.state.tempData;
			this.$store.commit('clearTempData');
		},
		methods: {
			submit() {
				this.$request.post('subscribe_save', {
					type:2,
					people_num:this.info.num,
					sub_data: this.info.service_data,
					sub_time: this.info.startTimeValue+'~'+this.info.endTimeValue,
					remark: '',
					venue_id: this.info.info.data.id,
					requirement_venue:this.info.demand,
					aim:this.info.purpose,
					name: this.info.name,
					floor_house_num:this.info.fanghao,
					phone:this.info.tel,
				}).then(res => {
					if (res.data.code != 10000) {
						return this.$toast(res.data.message);
					}
					//付款
					this.$request.post(`unified_order`, {
						id: res.data.data.id,
						type: 2,
						pay_status:1
					}).then(res => {
						console.log(res);
						if (res.data.code == 10000) {
							wx.requestPayment({
								timeStamp: res.data.data.timeStamp.toString(),
								nonceStr: res.data.data.nonceStr,
								package: res.data.data.package,
								signType: res.data.data.signType,
								paySign: res.data.data.paySign,
								success: (res) => {
									this.$navto.navto("/pages/juanjiahui_result/juanjiahui_result")
								},
								fail: (res) => {
									this.$toast('支付失败');
								}
							});
						}
					})
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.cartBox {
		position: fixed;
		z-index: 3;
		bottom: 0;
		width: 100%;
		height: 130rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding-left: 40rpx;
		padding-right: 40rpx;
		justify-content: space-between;
		padding-bottom: 20rpx;
		border-top: 1rpx solid #f0f0f0;
		.totalPrice {
			color: #121212;
			font-weight: 700;
			font-size: 34rpx;
			letter-spacing: 2rpx;
		}
		.totalLabel{
			font-weight: 700;
			font-size: 20rpx;
			color: #121212;
		}
		.submit {
			width: 420rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: #121212;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 700;
			font-size: 28rpx;
			color: #FFFFFF;
			letter-spacing: 5rpx;
			margin-left: auto;
		}
	}
	.userBox{
		padding-left: 40rpx;
		padding-right: 40rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		border-top: 25rpx solid #f0f0f0;
		.userItem{
			padding: 50rpx 0rpx 50rpx 0rpx;
			border-bottom: 1rpx solid #000000;
			font-weight: 700;
			font-size: 26rpx;
			color: #121212;
			justify-content: space-between;
			display: flex;
			.userLabel{
				font-weight: 700;
				font-size: 28rpx;
				color: #121212 100%;
				letter-spacing: 6rpx;
			}
		}
		.userItem:last-child{
			border: none;
		}
	}
	.noteBox{
		padding: 45rpx 0rpx 45rpx 0rpx;
		display: flex;
		flex-direction: column;
		font-weight: 700;
		font-size: 26rpx;
		color: #121212;
		.notes{
			font-weight: 500;
			width: 100%;
			font-size: 22rpx;
			color: #121212;
			margin-top: 30rpx;
			letter-spacing: 5rpx;
		}
	}
	.item{
		padding: 45rpx 0rpx 45rpx 0rpx;
		display: flex;
		justify-content: space-between;
		font-weight: 700;
		font-size: 26rpx;
		color: #121212;
		// letter-spacing: 5rpx;
		border-bottom: 1rpx solid #000000;
	}
	.timeBox{
		margin-top: 60rpx;
		padding: 0rpx 0rpx 60rpx 0rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #000000;
		.timeItem{
			display: flex;
			flex-direction: column;
			align-items: center;
			.time{
				font-weight: 500;
				font-size: 26rpx;
				color: #121212;
				margin-top: 30rpx;
			}
			.timeLabel{
				font-weight: 500;
				font-size: 20rpx;
				color: #888888;
			}
		}
	}
	.placeBox {
		padding: 80rpx 40rpx 85rpx 40rpx;
		background-color: #ffffff;
		box-sizing: border-box;

		.placeInfo {
			padding-bottom: 75rpx;
			border-bottom: 1rpx solid #000000;
			display: flex;
			flex-direction: column;
			.placePoster{
				position: absolute;
				width: 200rpx;
				height: 150rpx;
				top: 80rpx;
				right: 40rpx;
				border-radius: 10rpx;
			}
			.placePrice {
				color: #121212;
				font-weight: 700;
				font-size: 22rpx;
				margin-top: 20rpx;
			}

			.placeAddress {
				font-weight: 500;
				font-size: 20rpx;
				color: #121212;
				margin-top: 10rpx;
				width: 69%;
			}

			.placeCapacity {
				font-weight: 500;
				font-size: 20rpx;
				color: #121212;
				margin-top: 20rpx;
			}

			.placeName {
				font-weight: 700;
				font-size: 30rpx;
				color: #121212;
				width: 69%;
			}
		}
	}

	.content {
		width: 100%;
		min-height: 100vh; /* 允许内容扩展 */
		background-color: #f0f0f0;
		padding-bottom: 200rpx;
	}
</style>